Powerful Button Builder Plugin for WordPress
This knowledge base is wiki powered informational site where you can find latest documentation available for our Buttons X button builder plugin for WordPress. We consider this resource as a starting point for users to get familiar with Buttons X usage, getting answers to the most common questions or getting into more advanced features and options.
Thank you for purchasing Buttons X WordPress plugin. You are amazing!
Buttons X is powerful and an amazing plugin, it will help you manage buttons right from your WordPress dashboard. Create stunning buttons in few minutes without any coding.
In this section you will find list of useful resources related to Buttons X WordPress plugin, including link to official support, CodeCanyon sales page and official website.
To get your support related question answered in the fastest timing, please head over to our support page and create a ticket.
Before applying for support please make sure you understand the rules of support and go through all steps described and listed on support policy in order to get your issues solved as soon as possible.
The purpose of support is to provide you with the right answers at the right time. Our support is provided only for direct product buyers.
Ticket support is the only official support handling mechanism. Questions sent using other channels may be ignored without notice.
We provide support because of goodwill and want to offer our customers best service possible. We keep rights not to provide support due to abuse or any other reasons that are against this policy.
Before asking your question, please make sure you have read the documentation provided and searched the answer within our knowledge base at https://gautamthapar.ticksy.com/, as some of the questions may be already covered within this resource.
In order to get response in reasonable time we are kindly asking you to provide following information while sending email:
All information provided is confidential and will not be provided to any third party.
There are certain things that you can expect from our support:
There are certain things that are out of scope and will not be handled by me:
With leaving your e-mail you agree to receive promotional e-mails and newsletters from Gautam Thapar.
Thank you for finding time to read this policy and remember that I am here to help you out.
I am constantly working on a new features and improvements for Buttons X in order to keep your site and your business at the top. In this section you can find information on each and every update we created during lifetime of Buttons X.
Date | Version | Features | Files Changed |
---|---|---|---|
30th August 2015 | 1.0 |
|
- |
This section will explain all you have to know about licensing for Buttons X and point you to necessary resources. The most important thing you need to know about licensing of Buttons X is that we totally rely on licensing and copyrights developed by Envato who has an amazing licensing standards. At the moment Envato, so as Gautam Thapar, offers several types of licenses.
Extended License allows use of the item in one single end product, which you or one client may sell to end users (charge end users to access or use the end product), but user do not have access to the source files in any case.
Important: Distribution of source files is not permitted.
Extended license allows you, with the permission from Gautam Thapar (Author), to integrate Buttons X into your WordPress theme to sell on ThemeForest.
In order to read more about Extended license please visit CodeCanyon.
Regular License is the most common type of licensing for Buttons X. Regular license allows you to use item in one single end product which end user is not charged to access or use. You can acquire regular license for your own website, or if you are a developer - for one client by transferring the license to your client when the project is finished.
Important: Distribution of source files is not permitted.
Extended license allows you, with the permission from Gautam Thapar (Author), to integrate Buttons X into your WordPress theme to sell on ThemeForest.
In order to read more about Regular license please visit CodeCanyon.
Thank you for purchasing Buttons X and congratulations with the huge win which you are going to experience once you start using our amazing button builder which will bring you new experience in building your WordPress buttons and also will save you tons of time.
This section will guide you through initial setup and activation processes in order to get your copy of Buttons X up and running. Please follow sections step by step to get familiar with installation, activation and update processes.
Buttons X installation doesn't differ from any other plugin installation process, so you might be familiar with this process already. If not, please follow instructions below.
Congratulations, you are all set! To start creating buttons visit 'Buttons' > 'Add New'. Also make sure to check 'Buttons' > 'Settings' for available settings.
Please follow these steps -
Buttons X comes with a customised settings panel. The first thing to do after installing the plugin is to set the plugin settings. Navigate to 'Buttons' > 'Settings' and click the 'General' settings tab.
I try not to bother you with much settings so the settings panel is very minimal.
Available Settings -
Once you have made your choices, click 'Save'. If everything goes fine, you should see 'Settings saved' notification.
Buttons X includes demo buttons to get you started. Importing demo buttons is very easy, all you have to do is follow the below steps:
Detailed information is available on Export & Import page.
In this section you will learn in detail on how to create buttons and the various options available under buttons.
In this section you will learn about creating beautiful buttons using Buttons X button builder plugin for WordPress.
Let's get started.
(Optional) Add a pack and tags to easily find your button when you have lots and lots of buttons.
Once you have finished all these steps, give button a title and save the button.
Now, navigate to 'Buttons' > 'Buttons' and you can find the button short code in the 'ShortCode' column. Put this short code wherever you would like to display the button (on a post, page, etc.).
In this section you will learn in detail the various options available under the options panel.
Button animations related options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Hover | |||||
Animation | select | animation_hover | - | hvr-bob, hvr-bounce-in, hvr-bounce-out, hvr-buzz, hvr-buzz-out, hvr-float, hvr-grow-rotate, hvr-hang, hvr-pop, hvr-pulse, hvr-pulse-grow ,hvr-pulse-shrink ,hvr-push, hvr-rotate, hvr-shrink, hvr-sink, hvr-skew, hvr-skew-backward, hvr-skew-forward, hvr-wobble-bottom, hvr-wobble-horizontal, hvr-wobble-skew, hvr-wobble-to-bottom-right, hvr-wobble-to-top-right, hvr-wobble-top, hvr-wobble-vertical, hvr-grow, hvr-back-pulse, hvr-bounce-to-bottom, hvr-bounce-to-left, hvr-bounce-to-right, hvr-bounce-to-top, hvr-radial-in, hvr-radial-out, hvr-rectangle-in, hvr-rectangle-out, hvr-shutter-in-horizontal, hvr-shutter-in-vertical, hvr-shutter-out-horizontal, hvr-shutter-out-vertical, hvr-sweep-to-bottom, hvr-sweep-to-left, hvr-sweep-to-right, hvr-sweep-to-top, hvr-overline-from-center, hvr-overline-from-left, hvr-overline-from-right, hvr-overline-reveal, hvr-trim, hvr-underline-from-center, hvr-underline-from-left, hvr-underline-from-right, hvr-underline-reveal, hvr-curl-top-left, hvr-curl-top-right, hvr-curl-bottom-right, hvr-curl-bottom-left. | Select button hover animation type. |
Button background related options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Color | |||||
Normal | colorpicker | background_color_normal | #f4f4f4 | - | Set button background color. |
Hover | colorpicker | background_color_hover | #e8e8e8 | - | Set button background color for when the button will be hovered. |
Image | |||||
Normal | file | background_image_normal | - | - | Select or upload button background image. |
Hover | file | background_image_hover | - | - | Select or upload button background image for when the button will be hovered. |
Button border related options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Normal | |||||
Size | range | border_size_normal | 0 | - | Set border size in pixels. |
Style | select | border_style_normal | none | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit | Set border style. |
Color | colorpicker | border_color_normal | - | - | Set border color. |
Hover | |||||
Size | range | border_size_hover | 0 | - | Set border size in pixels for when the button is hovered. |
Style | select | border_style_hover | none | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit | Set border style for when the button is hovered. |
Color | colorpicker | border_color_hover | - | - | Set border color for when the button is hovered. |
Radius (Normal) | |||||
Top Left | range | border_radius_top_left_normal | 0 | - | Set top left border radius in pixels. |
Top Right | range | border_radius_top_right_normal | 0 | - | Set top right border radius in pixels. |
Bottom Left | range | border_radius_bottom_left_normal | 0 | - | Set bottom left border radius in pixels. |
Bottom Right | range | border_radius_bottom_right_normal | 0 | - | Set bottom right border radius in pixels. |
Radius (Hover) | |||||
Top Left | range | border_radius_top_left_hover | 0 | - | Set top left border radius in pixels for when button is hovered. |
Top Right | range | border_radius_top_right_hover | 0 | - | Set top right border radius in pixels for when button is hovered. |
Bottom Left | range | border_radius_bottom_left_hover | 0 | - | Set bottom left border radius in pixels for when button is hovered. |
Bottom Right | range | border_radius_bottom_right_hover | 0 | - | Set bottom right border radius in pixels for when button is hovered. |
CSS options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Custom Class | text | class | - | - | Add a custom class to button. This will help in adding custom styles using this class. |
Custom CSS | css editor | css | - | - | Add custom css like below -
#btnsx-123 { padding: 40px; }where, '123' is the ID of button. Do change it according to your button ID. |
Button gradient related options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Type | |||||
Normal | select | gradient_type_normal | vertical | vertical, horizontal, diagonal_top, diagonal_bottom, radial | Select gradient type. |
Hover | select | gradient_type_hover | vertical | vertical, horizontal, diagonal_top, diagonal_bottom, radial | Select gradient type for when button will be hovered. |
Stop (Normal) [Repeatable] | |||||
Location | range | gradient_stop_location_normal | - | - | Set gradient stop location. Must be between 0 and 100. |
Color | color | gradient_stop_color_normal | - | - | Set gradient stop color. |
Stop (Hover) [Repeatable] | |||||
Location | range | gradient_stop_location_hover | - | - | Set gradient stop location for when button is hovered. Must be between 0 and 100. |
Color | color | gradient_stop_color_hover | - | - | Set gradient stop color for when button is hovered. |
CSS | |||||
Normal | css editor | gradient_css_normal | - | - | Add custom gradient CSS. |
Hover | css editor | gradient_css_hover | - | - | Add custom gradient CSS for when button will be hovered. |
Button icon related options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Main | |||||
Icon | select | icon | - | Font Awesome Icon | Select the desired icon. Icon will be placed to the left of primary text if it is not already aligned. |
Size | range | icon_size | - | - | Add font size in pixels. This will make the icon bigger or smaller depending up on the value. Best is to keep the icon size similar to primary text size. |
Alignment | select | icon_alignment | - | none, left, right | Position the icon vertically. More the value more the icon will move vertically downwards. You can also specify negative values to move icon upwards. |
Color | |||||
Normal | colorpicker | icon_color_normal | - | - | Select icon color. |
Hover | colorpicker | icon_color_hover | - | - | Select icon color for when button is hovered. |
Image | |||||
Normal | media | icon_image_normal | - | - | Select or upload icon image. |
Hover | media | icon_image_hover | - | - | Select or upload icon image for when the button is hovered. |
Position Freely | checkbox | icon_image_position | 0 | 0, 1 where 0 = no, 1 = yes | Select or upload icon image for when the button is hovered. |
Image Position | |||||
Top | number | icon_image_position_top | 0 | - | Add value in pixels. This will position the icon from top of button based on the value provided. More the value more the icon image will move to the bottom of button. |
Bottom | number | icon_image_position_bottom | 0 | - | Add value in pixels. This will position the icon from bottom of button based on the value provided. More the value more the icon image will move to the top of button. |
Left | number | icon_image_position_left | 0 | - | Add value in pixels. This will position the icon from left of button based on the value provided. More the value more the icon image will move to the right of button. |
Right | number | icon_image_position_right | 0 | - | Add value in pixels. This will position the icon from right of button based on the value provided. More the value more the icon image will move to the left of button. |
Shadow | |||||
Horizontal | range | icon_shadow_horizontal | - | - | Add position of the horizontal shadow in pixels. Adds horizontal shadow to icon. |
Vertical | range | icon_shadow_vertical | - | - | Add position of the vertical shadow in pixels. Adds vertical shadow to icon. |
Blur | range | icon_shadow_blur | - | - | Add blur radius in pixels. Makes icon shadow blurry. |
Color | colorpicker | icon_shadow_color | - | - | Pick icon shadow color. |
Divider | |||||
Position | select | icon_divider_position | - | none, left, right | Select divider position. Position the divider to left or right of icon. |
Size | range | icon_divider_size | - | - | Add divider size in pixels. This will make the divider bigger or smaller depending up on the value. Best is to keep the divider size little smaller or equal to icon size. |
Color | colorpicker | icon_divider_color | - | - | Select divider color. |
Animation | |||||
Animation | select | icon_animation | - | none, click, hover | Select when to animate the icon, on button click or when button is hovered. |
Animation Type | select | icon_animation_type | - | All animate.css options | Select type of animation. Choose from many different types. |
Padding | |||||
Top | range | icon_padding_top | 0 | - | Set top padding for icon. |
Bottom | range | icon_padding_bottom | 0 | - | Set bottom padding for icon. |
Left | range | icon_padding_left | 0 | - | Set left padding for icon. |
Right | range | icon_padding_right | 0 | - | Set right padding for icon. |
Layout options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
ID | hidden | id | (Auto Generated) | - | The button ID. |
Width | range | width | - | - | Add button width in pixels. This gives the button a fixed width. Clearing the field removes fixed width. |
Height | range | height | - | - | Add button height in pixels. This gives the button a fixed height. Clearing the field removes fixed height. |
Size | select | size | - | huge, large, wide, small, mini | These are some preset button sizes. Changing the size value automatically adjusts the font size and padding values of primary text. |
Disabled | checkbox | disabled | 0 | 0, 1 | Make the button disabled by checking this field. Clicking the button won't be possible once disabled. |
Embossed | checkbox | embossed | 0 | 0, 1 | Checking this field gives an embossed effect to button. |
Full Width | checkbox | full_width | 0 | 0, 1 | Make the button cover the entire width of the container. |
Container | checkbox | container | 0 | 0, 1 | Add a container div to button. |
Wrap Center | checkbox | wrap_center | 0 | 0, 1 | Makes the button centered. Very helpful when you want the button to be centered inside a big container. |
Link options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Type | select | link_type | - | admin_page, back_to_top, edd_checkout, edd_straight_to_gateway, home_page, login, login_redirect_current_page, login_redirect_home_page, login_redirect_custom_page, logout, logout_redirect_current_page, logout_redirect_home_page, logout_redirect_custom_page, lost_password, lost_password_redirect_current_page, lost_password_redirect_home_page, lost_password_redirect_custom_page, menu, post, register, url, woocommerce_add_to_cart | Choose the type of link required for the button. |
Target | select | link_target | - | new_window, same_window | New window opens the link in a new browser tab whereas Same Windows opens the link in the same browser tab. |
Relationship | select | link_relationship | - | (blank), alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag | It species the relationship between the current document and linked document/resource. Alternate - Links to an alternate version of the document. Author - Links to author of the document. Bookmark - Permanent URL used for bookmarking. Help - Links to a help doument. License - Links to copyright information for the document. Next - The next document in a selection. Nofollow - Links to an unendorsed document, like a paid link. No Referrer - Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink. Prefetch - Specifies that the target document should be cached. Previous - The previous document in a selection. Search - Links to a search tool for the document. Tag - A tag (keyword) for the current document. |
EDD Download ID | select | link_edd_id | - | All EDD downloads | Select Easy Digital Downloads download ID. |
Menu as Dropdown | select | link_menu | - | - | Select a menu. These are the menus created under Appearance -> Menu. |
Post/Page/CPT | select | link_post | 0 | 0, 1 | Select a post, page or custom post type. |
URL | text | link | - | - | Add a custom URL. |
Redirect URL | text | link_redirect_url | - | - | Only add the last part of the url where you would like to redirect user. If the full URL is http://wwww.example.com/my-page/ then only add /my-page/ in this field. The other part of the URL is computed automatically. |
Woocommerce Product ID | select | link_woocommerce_id | - | All WooCommerce products | Select a Woocommerce product ID. |
Margin options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Top | range | margin_top | 0 | - | Set top margin for button. |
Bottom | range | margin_bottom | 0 | - | Set bottom margin for button. |
Left | range | margin_left | 0 | - | Set left margin for button. |
Right | range | margin_right | 0 | - | Set right margin for button. |
Padding options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Top | range | padding_top | 0 | - | Set top padding for button. |
Bottom | range | padding_bottom | 0 | - | Set bottom padding for button. |
Left | range | padding_left | 0 | - | Set left padding for button. |
Right | range | padding_right | 0 | - | Set right padding for button. |
Button preview options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Background | colorpicker | - | - | - | This field is very helpful in deciding background color for a button when the button is to be used over a colored background (not white). By changing the preview background you will get exact look of the button over a colored background that is not white. |
Button primary text options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Text | |||||
Text | text | text | - | - | Add main button text. |
Transform | select | text_transform | - | capitalize, uppercase, lowercase, inherit | This field controls the capitalization of text. |
Font | |||||
Font Size | range | text_font_size | 21 | - | Add font size in pixels. This will make your primary text bigger or smaller depending up on the value specified. |
Font Style | select | text_font_style | normal | normal, italic, oblique, inherit | Select font style. This will style your additional text. Normal means as it is, italic means the text will appear slanted, oblique makes the text slanted + bold and inherit will get the style from parent element. |
Font Weight | select | text_font_weight | normal | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit | Select font weight. This adds weight to text like bold makes the text stronger. 100 is lightest and 900 is boldest. |
Font Family | select | text_font_family | - | All Google Web Fonts | Select font family. Choose from among 100's of Google Web Fonts to style primary text. |
Color | |||||
Normal | colorpicker | text_color_normal | #999 | - | Select text color. |
Hover | colorpicker | text_color_hover | #777 | - | Select text color for when button is hovered. |
Shadow | |||||
Horizontal | range | text_shadow_horizontal | - | - | Add position of the horizontal shadow in pixels. |
Vertical | range | text_shadow_vertical | - | - | Add position of the vertical shadow in pixels. |
Blur | range | text_shadow_blur | - | - | Add blur radius in pixels. |
Color | colorpicker | text_shadow_color | - | - | Pick shadow color. |
Padding | |||||
Top | range | text_padding_top | 0 | - | Set top padding for primary text. |
Bottom | range | text_padding_bottom | 0 | - | Set bottom padding for primary text. |
Left | range | text_padding_left | 0 | - | Set left padding for primary text. |
Right | range | text_padding_right | 0 | - | Set right padding for primary text. |
Button secondary text options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Text | |||||
Text | text | text_secondary | - | - | Add additional text for button. |
Transform | select | text_secondary_transform | - | capitalize, uppercase, lowercase, inherit | This field controls the capitalization of text. |
Position | select | text_secondary_position | - | same_line, new_line | Select additonal text position. Put the text on the same line as primary text or move it to a new line. |
Alignment | select | text_secondary_alignment | - | left, right, center | Align the additional text as required. Left moves the text to the left of button, right moves the text right of the button and center keeps the text centered. |
Font | |||||
Font Size | range | text_secondary_font_size | 21 | - | Add font size in pixels. This will make your primary text bigger or smaller depending up on the value specified. |
Font Style | select | text_secondary_font_style | normal | normal, italic, oblique, inherit | Select font style. This will style your additional text. Normal means as it is, italic means the text will appear slanted, oblique makes the text slanted + bold and inherit will get the style from parent element. |
Font Weight | select | text_secondary_font_weight | normal | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit | Select font weight. This adds weight to text like bold makes the text stronger. 100 is lightest and 900 is boldest. |
Font Family | select | text_secondary_font_family | - | All Google Web Fonts | Select font family. Choose from among 100's of Google Web Fonts to style primary text. |
Color | |||||
Normal | colorpicker | text_secondary_color_normal | #999 | - | Select text color. |
Hover | colorpicker | text_secondary_color_hover | #777 | - | Select text color for when button is hovered. |
Shadow | |||||
Horizontal | range | text_secondary_shadow_horizontal | - | - | Add position of the horizontal shadow in pixels. |
Vertical | range | text_secondary_shadow_vertical | - | - | Add position of the vertical shadow in pixels. |
Blur | range | text_secondary_shadow_blur | - | - | Add blur radius in pixels. |
Color | colorpicker | text_secondary_shadow_color | - | - | Pick shadow color. |
Padding | |||||
Top | range | text_secondary_padding_top | 0 | - | Set top padding for secondary text. |
Bottom | range | text_secondary_padding_bottom | 0 | - | Set bottom padding for secondary text. |
Left | range | text_secondary_padding_left | 0 | - | Set left padding for secondary text. |
Right | range | text_secondary_padding_right | 0 | - | Set right padding for secondary text. |
Button shadow options comes under this tab.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Normal [Repeatable] | |||||
Horizontal | range | shadow_horizontal | - | - | Set horizontal shadow in pixels. |
Vertical | range | shadow_vertical | - | - | Set vertical shadow in pixels. |
Blur | range | shadow_blur | - | - | Set blur radius in pixels. |
Spread | range | shadow_spread | - | - | Set shadow spread in pixels. |
Position | select | shadow_position | - | outset, inset | Set shadow position. |
Color | colorpicker | shadow_color | - | - | Set shadow colour. |
Hover [Repeatable] | |||||
Horizontal | range | shadow_horizontal_hover | - | - | Set horizontal shadow in pixels. |
Vertical | range | shadow_vertical_hover | - | - | Set vertical shadow in pixels for when the button will be hovered. |
Blur | range | shadow_blur_hover | - | - | Set blur radius in pixels for when the button will be hovered. |
Spread | range | shadow_spread_hover | - | - | Set shadow spread in pixels for when the button will be hovered. |
Position | select | shadow_position_hover | - | outset, inset | Set shadow position for when the button will be hovered. |
Color | colorpicker | shadow_color_hover | - | - | Set shadow colour for when the button will be hovered. |
CSS | |||||
Normal | css editor | shadow_css | - | - | Set custom box shadow CSS. |
Hover | css editor | shadow_css_normal | - | - | Set custom box shadow CSS for when the button will be hovered. |
Button additional options that are used mainly in short code to over ride a value. These options are not added to the options panel.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
CSS Inline | - | css_inline | - | exterrnal, inline | Use this attribute to over ride Buttons X CSS settings for a particular button. |
In this section you will learn in detail on how to create social buttons and the various options available under social buttons.
Buttons X makes it easy for users to create social buttons without having to write single line of code. Let's get started!
In the next tutorial we will learn on how to use social buttons on post / page or custom post types. Thank you for checking out this tutorial.
In this tutorial we will learn to use social buttons on our website. I will assume that you have already read the tutorial on how to create social buttons. If you haven't then check it out first - Creating a Social Button.
Let's get started!
Thank you for checking out this tutorial!
In this section you will learn how to export and import buttons. Here it is assumed that you have already created a few buttons and that the buttons list is not empty.
Single Button Export
Bulk Export
One Click Import
Manual Import
Thank you for checking out this tutorial!
In this section we will demonstrate you on how to clone a button. Here it is assumed that you have already created a few buttons and that the buttons list is not empty.
Bulk Export
One Click Import
Manual Import
Thank you for checking out this tutorial!
Buttons X button builder plugin supports extensions. It comes with two free extensions, analytics and tooltip.
Buttons X extensions are installed in the same manner as you install a WordPress plugin. Please read Plugin Installation for more details.
Detail information about analytic options can be found below.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Enable | checkbox | analytics_google | 0 | 0, 1 | Enable Google analytics to track button click events. You must have Google analytics enabled on your website. |
Tracking Variable | text | analytics_google_tracking_variable | ga | - | If using universal tracking then most probabily the tracking variable would be ga. It might also be possible that you have a different tracking variable. For example: If you use the free version of Google Analytics by yoast then the tracking variable will be __gaTracker. You can easily check which tracking variable being used on your website (check below). |
Event Category | text | analytics_google_event_category | - | - | It is typically the object that was interacted with (e.g. button). |
Event Label | text | analytics_google_event_label | - | - | Useful for categorizing events (e.g. cart buttons). |
Event Value | text | analytics_google_event_value | - | - | Values must be non-negative. Useful to pass counts (e.g. 4) times. |
Do not impact bounce rate | checkbox | analytics_google_event_nointeraction | 0 | 1 | Send an event without impacting the bounce rate. |
In order to find the tracking variable follow the below steps:
Detail information about analytic options can be found below.
Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
---|---|---|---|---|---|
Tooltip Text | text | tooltip_text | - | - | Insert text for tooltip. HTML is allowed. |
Tooltip Animation | select | tooltip_animation | - | fade, fall, grow, slide, swing | Select tooltip animation type. |
Tooltip Position | select | tooltip_position | top | bottom, bottom-left, bottom-right, left, right, top, top-left, top-right | Select tooltip position. |
Tooltip Theme | select | tooltip_theme | tooltipster-light | tooltipster-default, tooltipster-light, tooltipster-noir, tooltipster-punk, tooltipster-shadow, tooltipster-btnsx | Select tooltip theme style. |
Once the options are configured hover the button in preview to test tooltip.
Thanks for checking out!
Support is provided only through ticketing system. I highly recommend that you read the new support policy for complete details.
These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included JavaScript codes under btnsx/assets/
These are the various attribution inks to the Javascript files included or modified to work with in this plugin. All included JavaScript codes under btnsx/assets/
.These are the various attribution inks to the icons included or modified to work with in this plugin. All included JavaScript codes under btnsx/assets/
You can find the version history (changelog.txt) file inside Btnsx-full.zip file or you can check changelog on plugin description page.
Once again, thank you so much for purchasing this plugin. I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugins on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.